<template>
    <div
      class="fps-monitor"
      :style="{ position: 'absolute', bottom: '350px', right: '15px', background: 'rgba(255, 255, 255, 0.8)', padding: '5px', borderRadius: '5px' }"
    >
      FPS: {{ fps }}
    </div>
  </template>
  
  <script>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  
  export default {
    name: 'FpsMonitor',
    setup() {
      const fps = ref(0);
      let frameCount = 0;
      let lastTime = performance.now();
      let animationFrameId;
  
      const updateFPS = () => {
        const currentTime = performance.now();
        frameCount++;
  
        if (currentTime - lastTime >= 1000) {
          fps.value = frameCount;
          frameCount = 0;
          lastTime = currentTime;
        }
  
        animationFrameId = requestAnimationFrame(updateFPS);
      };
  
      onMounted(() => {
        animationFrameId = requestAnimationFrame(updateFPS);
      });
  
      onBeforeUnmount(() => {
        cancelAnimationFrame(animationFrameId);
      });
  
      return {
        fps,
      };
    },
  };
  </script>
  
  <style scoped>
  .fps-monitor {
    z-index: 9999; /* 确保显示在地图上方 */
  }
  </style>
  